<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
    <input type="text" class="username1">
    <input type="text" class="username2">
    <input type="text" class="username3">

    <form>
        <input type="text">
        <button>提交</button>
    </form>

    <script>
        // 表单事件：focus 获取焦点事件
        $('.username1').focus(function(){
            console.log('获取焦点')
        })

        //表单事件：blur 失去焦点事件
        $('.username2').blur(function(){
            console.log('失去焦点')
            $('.username2').val('')
        })

        // 表单事件：change 内容改变事件,失去焦点或回车都会触发
        $('.username3').change(function(){
            console.log('内容改变了')
        })

        // 表单事件：submit 提交事件
        $('form').submit(function(){
            alert('表单提交了')
        })

    </script>

</body>
</html>